<template>
  <div id="app" class="index">
    <div class="title-h2">
      <h2 class="title-h2s">Competition</h2>
    </div>

    <div class="container">
      <h1>欢迎参加我们的比赛！</h1>
      <div id="categories">
        <div
          class="category"
          @click="goToLogin(item)"
          v-for="(item, index) in titlelist"
          :key="index"
        >
          {{ item.title }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data: function () {
    return {
      titlelist: [],
    };
  },
  methods: {
    goToLogin(titledata) {
      localStorage.setItem("title", JSON.stringify(titledata));
      this.$router.push({
        name: "login",
      });
    },

    //获取赛事名称:
    getclassificationTitle() {
      axios({
        url: "http://localhost:3002/competition/classification/list",
        method: "post",
      }).then((res) => {
        this.titlelist = res.data.list;
      });
    },
  },
  mounted() {
    this.getclassificationTitle();
  },
};
</script>

<style lang="less" scoped>
.title-h2 {
  // background-color: #fff;
  height: 100px;
  color: #092b72;
  .title-h2s {
    display: inline-block;
  }
}
.container {
  color: rgb(214, 209, 209);
  max-width: 600px;
  margin: 150px auto;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.category {
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid #eee;
  cursor: pointer;
  text-align: center;
}
.category:hover {
  background-color: #568094;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.1), 0 10px 20px rgba(0, 0, 0, 0.2);
}

a,
a:link,
a:visited,
a:hover,
a:active {
  text-decoration: none;
  color: inherit;
  background-color: transparent;
  border: none;
  outline: none;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
</style>